import React, { useState, useEffect } from 'react'
import { Space, Typography, Divider, Skeleton } from 'antd'
import { FieldTimeOutlined, AppstoreOutlined, UserOutlined } from '@ant-design/icons'
import styles from './index.less'
import ArticleComment from './ArticleComment'

const dataUrl = "https://120.76.193.53/app/mock/data/2060788?scope=response&id=";

const SpaceSplit = (article) => {
  return (
    <Space split={<Divider type="vertical" />}>
      <span><AppstoreOutlined style={{ marginRight: 4 }} />{article.category}</span>
      <span><FieldTimeOutlined style={{ marginRight: 4 }} />{article.publishTime}</span>
      <span><UserOutlined style={{ marginRight: 4 }} />{article.creator}</span>
    </Space>
  )
}

// 文章详情页面
const Detail = (props) => {

  const [article, setArticle] = useState([{}])

  const [loading, setLoading] = useState(true)

  // 文章id
  const { id } = props.match.params

  useEffect(() => {
    // 请求接口获取文章详情数据
    fetch(dataUrl + id)
      .then(res => res.json())
      .then(res => { setArticle(res); setLoading(false) })
  }, [id])

  console.log('文章详情页面 props', props);

  return (
    <div className={styles["article-detail-container"]}>
      <Skeleton active paragraph={{ rows: 30 }} loading={loading}>
        <div className={styles["article-title-container"]}>
          <h1 className={styles["article-title"]}>{article.title}</h1>
        </div>
        <div className={styles["article-information"]}>{SpaceSplit(article)}</div>
        <div className={styles["article-content"]} dangerouslySetInnerHTML={{ __html: article.content }}></div>

        <div className="ContentItem-actions" style={{ float: 'inline-end', marginTop: 8, cursor: 'pointer' }}>
          赞同 条评论 分享 收藏 举报
        </div>

        <div className={styles["article-comment"]}>
          <ArticleComment />
        </div>
      </Skeleton>
    </div>
  )
}

export default Detail
